<template>
  <div class="api-detail">
    <common-breadcrumb :crumb="crumb"></common-breadcrumb>
    <h3 class="request_desc">{{apiDetail.request_desc}}</h3>
    <section>
      <div class="summary">
        <div class="left">{{apiDetail.request_methods}}</div>
        <div class="center">{{apiDetail.request_url}}</div>
        <div class="right">
          <el-button type="primary" size="mini">复制</el-button>
          <el-tooltip effect="dark" :content="content" placement="top">
            <i class="fav" :class="favorite ? 'el-icon-star-on' : 'el-icon-star-off'" @click="favApi"></i>
          </el-tooltip>
        </div>
      </div>
      <!-- 参数表格 -->
      <div class="params">
        <el-tabs v-model="paramsTabName">
          <el-tab-pane label="参数说明" name="params">
            <el-table :data="tableData" border stripe>
              <el-table-column label="#" type="index"></el-table-column>
              <el-table-column label="参数名" prop="paramsName"></el-table-column>
              <el-table-column label="参数说明" prop="paramsDesc"></el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
      <!-- 接口响应 -->
      <div class="reponse-json">
        <el-tabs v-model="responseJsonName">
          <el-tab-pane label="接口响应" name="responseJson">
            <pre v-highlightjs="hightlightsCode"><code class="javascript"></code></pre>
          </el-tab-pane>
        </el-tabs>
      </div>
    </section>
  </div>
</template>

<script>
import commonBreadcrumb from '../../components/common/Breadcrumb'
export default {
  components: {
    commonBreadcrumb
  },
  data () {
    return {
      crumb: ['api', 'api详情'],
      paramsTabName: 'params',
      responseJsonName: 'responseJson',
      apiDetail: {},
      tableData: [],
      hightlightsCode: '',
      favorite: false,
      favid: 0,
      content: '老子喜欢这个接口,收藏!!!'
    }
  },
  created () {
    this.getApiDetail()
  },
  methods: {
    /**
     * 获得api详情
     */
    async getApiDetail () {
      const apiId = this.$route.params.id
      const { data: res } = await this.$axios.get(`api/${apiId}`)
      if (res.code === 1) {
        this.apiDetail = res.result
        const tmp = res.result.request_params.split('|')
        // 字符串转对象
        tmp.forEach((item, index, newArr) => {
          newArr[index] = JSON.parse(item)
        })
        this.tableData = tmp
        this.hightlightsCode = res.result.response_json
      } else if (res.code === 0) {
        this.apiDetail = {}
      }
      // 是否收藏
      const { data: isfave } = await this.$axios.get('isfavapi', {
        params: {
          username: window.sessionStorage.getItem('username'),
          apiId: this.apiDetail.id
        }
      })
      if (isfave.code === 1) {
        this.favorite = isfave.isfav
        this.content = '老子不喜欢这个接口了,取消收藏!!!'
        this.favid = isfave.result[0].id
      }
    },
    /**
     * 收藏api
     */
    async favApi () {
      const postPamras = {
        username: window.sessionStorage.getItem('username'),
        apiId: this.apiDetail.id,
        projectId: this.apiDetail.project_id
      }
      if (this.favorite === false) {
        const { data: res } = await this.$axios.post('favapi', postPamras)
        if (res.code === 1) {
          this.favorite = true
          this.content = '老子不喜欢这个接口了,取消收藏!!!'
          return this.$message.success('收藏成功')
        } else {
          return this.$message.error('收藏失败')
        }
      } else {
        const { data: res } = await this.$axios.delete(`favapi/${this.favid}`)
        if (res.code === 1) {
          this.favorite = false
          this.content = '老子喜欢这个接口,收藏!!!'
          return this.$message.success('取消收藏成功')
        } else {
          this.$message.error('取消收藏失败')
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .request_desc {
    padding: 15px 0;
    color: #666;
    border-bottom: 1px solid #666;
  }
  section {
    border: 1px solid #666;
    padding: 15px;
    .summary {
      border: 1px solid #666;
      display: flex;
      justify-content: space-between;
      align-items: center;
      line-height: 40px;
      box-sizing: border-box;
      padding: 0 15px;
      margin-bottom: 10px;
      .left {
        border-right: 1px solid #666;
        padding-right: 15px;
      }
      .center {
        flex: 1;
        border-right: 1px solid #666;
        padding: 0 15px;
      }
      .right {
        padding: 0 0 0 15px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        .fav {
          color: #f00;
          margin-left: 15px;
          font-size: 24px;
          cursor: pointer;
        }
      }
    }
    .params {
      margin-bottom: 15px;
    }
  }
</style>
